<template>
  <div id="exchangeRecord">
    <h1 class="con-right-title">
      兑换记录
    </h1>
    <!-- 搜索 -->
    <top-search @toSearch="toSearch"></top-search>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-download" @click="exportFile">
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" min-width="100" align="center">
      </el-table-column>
      <el-table-column
        label="大鹏号"
        prop="dpAccount"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="name"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="商品类型" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.type | filterName('Integral_commodity_type') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品有效期"
        prop="endTime"
        min-width="100"
        align="center"
        :formatter="formatterEndTime"
      >
      </el-table-column>
      <el-table-column label="卡面额" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.cardDenomination / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="适用商品"
        prop="usableShop"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="兑换积分"
        prop="point"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        label="兑换时间"
        prop="createTime"
        min-width="120"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import topSearch from './topSearch'
import { getRecordList, downUrl } from '@/api/integralExchange/exchangeRecord'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  components: {
    topSearch
  },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  async mounted() {
    await sysNormalDisable('Integral_commodity_type', 'Integral_commodity_type')
    this.searchList()
  },
  methods: {
    /* 列表 */
    searchList() {
      getRecordList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 导出 */
    exportFile() {
      this.$confirm('确定导出兑换记录列表吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let obj = Object.assign({}, this.searchParams)
          let url = downUrl()
          this.downFile('get', url, obj, '积分兑换记录')
        })
        .catch(() => {})
    },
    /* 有效期格式化 */
    formatterEndTime(row) {
      return row.endTime.includes('9999') ? '永久有效' : `截止至${row.endTime}`
    }
  }
}
</script>
<style lang="less" scoped></style>
